<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    /*sprite animation*/
    .box{
        width: 256px;
        height: 256px;
        margin: 100px auto;
        overflow: hidden;
        background-image: url("./img/bg2.png");
        animation: run 1s steps(6) 6;
    }
    @keyframes run{
        from{
            background-position: 0 0;
        }
        to{
            background-position: -1536px 0;
        }
    }
</style>
<body>
<div class="box">

</div>
</body>
</html>
